<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON DB 가져오기</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		
		$('#insert').click(fnInsert);
		
		$('#btn').click(function(){
			loadData();
		});
	});
	
	function fnInsert(){
		var name = $('#name').val();
		var age = $('#age').val();
		var addr = $('#addr').val();
		var tel = $('#tel').val();
		
		if(name.length==0){
			alert("이름을 입력하세요.");
			return false;
		} else if(age.length==0){
			alert("나이를 입력하세요");
			return false;
		} else if(addr.length==0){
			alert("주소를 입력하세요");
			return false;
		} else if(tel.length==0){
			alert("전화를 입력하세요");
			return false;
		}
		
		var postVal = $('#frm').serialize(); 
		alert(postVal)
		$.ajax({ 
			type : "post",
			url : "insert.do",
			data : postVal,
			success : function(){
				alert("저장 성공");
				loadData();
			},
			error : function(){ alert('error'); }
		});
	}
	
	function htmlRequest(data){
		var html="";
		html += "<table border='1' cellpadding='3'>";
		html += "<tr>";
		html += "<td>번호</td>";
		html += "<td>이름</td>";
		html += "<td>나이</td>";
		html += "<td>주소</td>";
		html += "<td>전화번호</td>";
		html += "<td>삭제</td>";
		html += "</tr>";
		
		$.each(data, function(index, entry){
			var num = entry.mem.num;
			var name = entry.mem.name;
			var age = entry.mem.age;
			var addr = entry.mem.addr;
			var tel = entry.mem.tel;
			html += "<tr>";
			html += "<td>"+num+"</td>";
			html += "<td>"+name+"</td>";
			html += "<td>"+age+"</td>";
			html += "<td>"+addr+"</td>";
			html += "<td>"+tel+"</td>";
			html += "<td><button onclick='delMem("+num+")'>삭제</button></td>";
			html += "</tr>";
		});
		
		html += "</table>"
		$('#display').empty();
		$('#display').append(html);
	}
	
	function delMem(num){
		var getVal = "num="+num;
		$.ajax({
			type : "get", 
			url : "delete.do",
			data : getVal,
			success : loadData,
			error : function(){ alert("error"); }
		});
	}
	
	function loadData(){
		$.ajax({
			type : "get", 
			url : "list.do",
			dataType : "json",
			success : htmlRequest,
			error : function(){ alert("error"); }
		});
	}
	
	function validation(){
		
	}
</script>
</head>
<body>

<input type="button" value="LOAD MVC DATA" id="btn"/>
<div id="display">DATA LIST</div>
<hr/>

<form name="frm" id="frm" method="post">
	<table border="1" cellpadding="3">
	<tr>
		<td colspan="2" bgcolor="blue" align="center" style="color:#fff;">회원가입</td>
	</tr>
	<tr>
		<td>이름</td>
		<td><input type="text" name="name" id="name" /></td>
	</tr>
	<tr>
		<td>나이</td>
		<td><input type="text" name="age" id="age" size="3"/></td>
	</tr>
	<tr>
		<td>주소</td>
		<td><input type="text" name="addr" id="addr" size="50"/></td>
	</tr>
	<tr>
		<td>전화번호</td>
		<td><input type="text" name="tel" id="tel" /></td>
	</tr>
	<tr>
		<td colspan="2" align="center">
			<button id="insert">회원가입</button>
			<input type="reset" id = cancel" value="취소" />
		</td>
	</tr>
	</table>
</form>
</body>
</html>